<template>
    <div>
        <!-- value绑定的是对象，当改变值的可以取item的值，这时候必须制定value-key的值，标识选择框中显示的字段名称 -->
        <el-select
            v-model="data.provinceObj"
            :placeholder="
                useUserStore.profile.city?.province
                    ? useUserStore.profile.city?.province
                    : `请选择`
            "
            @change="provinceChange"
            value-key="name"
            style="width: 203px"
        >
            <el-option
                v-for="(item, index) in data.provinceData"
                :key="index"
                :label="item.name"
                :value="item"
            ></el-option> </el-select
        >&nbsp;&nbsp;
        <el-select
            v-model="data.cityObj"
            :placeholder="
                useUserStore.profile.city?.city
                    ? useUserStore.profile.city?.city
                    : `请选择`
            "
            @change="cityChange"
            value-key="name"
            style="width: 203px"
        >
            <el-option
                v-for="(item, index) in data.cityData"
                :key="index"
                :label="item.name"
                :value="item"
            ></el-option> </el-select
        >&nbsp;&nbsp;
        <el-select
            v-model="data.countryObj"
            :placeholder="
                useUserStore.profile.city?.country
                    ? useUserStore.profile.city?.country
                    : `请选择`
            "
            @change="countryChange"
            value-key="name"
            style="width: 203px"
        >
            <el-option
                v-for="(item, index) in data.countryData"
                :key="index"
                :label="item.name"
                :value="item"
            ></el-option> </el-select
        >&nbsp;&nbsp;
        <el-input
            class="input"
            v-model="data.input"
            :placeholder="
                useUserStore.profile.city?.input
                    ? useUserStore.profile.city?.input
                    : `请输入详细地址`
            "
            @input="inputChange"
            style="width: 203px"
        />
    </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import ProvinceCityCountry from '@/assets/address.json'
import { userStore } from '@/stores/user'

const useUserStore = userStore()
const emits = defineEmits(['change'])
const data = reactive({
    provinceObj: { name: '' },
    cityObj: { name: '' },
    countryObj: { name: '' },
    provinceData: ProvinceCityCountry.address,
    cityData: [],
    countryData: [],
    input: '',
})
// 省份change
const provinceChange = value => {
    data.cityData = value.children // 市下拉列表
    data.countryData = [] // 清空区县下拉列表数据
    data.cityObj = {} // 清空市输入框内容
    data.countryObj = {} // 清空区县输入框内容
}
// 市change
const cityChange = value => {
    data.countryData = value.children // 县区下拉框列表
    data.countryObj = {} // 清空区县输入框内容
}
// 县change
const countryChange = value => {
    emits('change', {
        province: data.provinceObj.name,
        city: data.cityObj.name,
        country: data.countryObj.name,
        input: data.input,
    })
}
const inputChange = () => {
    emits('change', {
        province: data.provinceObj.name,
        city: data.cityObj.name,
        country: data.countryObj.name,
        input: data.input,
    })
}
</script>

<style lang="scss" scoped>
.input {
    width: 203px;
}
:deep(.el-input__inner) {
    &::placeholder {
        color: rgb(95, 95, 95);
    }
}
</style>
